<template>
	<div class="test">
		<ul>
			<li v-for="(item,index) in products" :key="index">
				<p>{{item.name}}</p>
				<transition name="sub">
					<p v-if="item.numbers" class="sub" @click="handleSubClick(item.id)">-</p>
				</transition>
				<p v-if="item.numbers" class="number">{{item.numbers}}</p>
				<p class="add" @click="handleAddClick(item.id)">+</p>
			</li>
		</ul>
	</div>
</template>

<script>
export default{
	name: 'Test',
	data(){
		return{
			products:[
				{id:0, name:"苹果", numbers:null},
				{id:1, name:"香蕉", numbers:null},
				{id:2, name:"挑子", numbers:null}
			]
		}
	},
	methods:{
		handleAddClick(e){
			// this.products.forEach((item)=>{
			// 	if(item.id == id){
			// 		item.numbers ++
			// 	}
			// })
		},
		handleSubClick(id){
			this.products.forEach((item)=>{
				if(item.id == id){
					item.numbers --
				}
			})
		}
	}
	
}
</script>	

<style scoped>
.test{ width: 290px; margin: 30px auto; position: relative;}
.test p{ margin: 0;	padding: 0;	float: left;}
.test ul{margin: 0; padding: 0;}
.test ul li{ list-style-type: none; height: 30px; }
.test ul li .add,.sub{ position: absolute; width: 23px; height: 23px; border-radius: 12px; border: 0; background: #CCCCCC; line-height: 23px;}
.test ul li .add{ right: 0;}
.test ul li .sub{ right: 80px;}
.test ul li .number{ position: absolute; right: 23px; width: 60px;}

.sub-leave-to,.sub-enter{ transform: translateX(80px) rotate(360deg) }
.sub-leave-active,.sub-enter-active{ transition:all 0.5s}

</style>
	